<!DOCTYPE html>
<html>
  <head>
    <title>Zoom Levels Tutorial - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      #map {
        width: 600px;
        height: 400px;
      }
    </style>
    <style>
      .leaflet-tile-container {
        pointer-events: all;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      var map = L.map('map', {
        minZoom: 0,
        maxZoom: 1
      })

      var cartodbAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution">CARTO</a>'

      var positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution: cartodbAttribution
      }).addTo(map)

      /**
       * 参考资料：https://leafletjs.cn/examples/zoom-levels/
       *
       * 假设整个地球只是一张正方形图像，宽 256 像素，高 256 像素，即 tileSize 为 256
       *
       * 1. 当以 0 缩放级别表示世界地图时，它的宽高度为 256 像素
       * 2. 当以 1 缩放级别表示世界地图时，它的宽高度为 256 * 2 像素，即可以用 4 个宽高度为 256 像素的图像表示
       * 3. 当以 2 缩放级别表示世界地图时，它的宽高度为 256 * 4 像素，即可以用 16 个宽高度为 256 像素的图像表示
       *
       * 即每个缩放级别，每个图像被分成四份。整个世界地图的宽度和高度为 256 * 2 ^ zoomLevel 像素
       *
       * 依次类推，大多数瓦片服务提供最高缩放级别为 18，具体取决于它们的覆盖范围，但这足够让每个瓦片展示几个城市街区了
       */
      map.setView([0, 0], 0)
    </script>
  </body>
</html>
